<template>
	<view class="full">
		<Top :title='title' :Black="true"></Top>
		<view class="boxs" style="position: fixed;z-index: 999999;background: #111;">
			<scroll-view class="scroll" :scroll-x="true">
				<view v-for="(item,i) in list" :key='i' class="btn" @click="change(item,item.id,i)"
					:class="{check:checkid==item.id}">
					{{item.title}}
				</view>
				<view class="btn" style="width:100rpx;"></view>
				<view class="tiao" :style="{left:checkidIndex*120+41+'rpx',}"></view>
			</scroll-view>
			<view class="jian">
				<view class="jianl" :class="{ent:showlx}" @click="showlx=!showlx"></view>
			</view>
		</view>
		<view class="boxs" style="opacity: 0;">
			<scroll-view class="scroll" :scroll-x="true">
				<view v-for="(item,i) in list" :key='i' class="btn" @click="change(item,item.id,i)"
					:class="{check:checkid==item.id}">
					{{item.title}}
				</view>
				<view class="btn" style="width:100rpx;"></view>
				<view class="tiao" :style="{left:checkidIndex*120+41+'rpx',}"></view>
			</scroll-view>
			<view class="jian">
				<view class="jianl" :class="{ent:showlx}" @click="showlx=!showlx"></view>
			</view>
		</view>
		<view class="lx_box" v-show="showlx">
			<scroll-view class="lx_scroll" :scroll-x="true">
				<view class="lx_btn" v-for="(item,i) in arrg" :key='i' :class='{check:checkdg==item.id}'
					@click="changeag(item,item.id)">
					{{item.title}}
				</view>
			</scroll-view>
			<scroll-view class="lx_scroll" :scroll-x="true">
				<view class="lx_btn" v-for="(item,i) in arrd" :key='i' :class='{check:checkd==item.id}'
					@click="changea(item,item.id)">
					{{item.title}}
				</view>
			</scroll-view>
			<scroll-view class="lx_scroll" :scroll-x="true">
				<view class="lx_btn" v-for="(item,i) in arrs" :key='i' :class='{check:checkds==item.id}'
					@click="changeas(item,item.id)">
					{{item.title}}
				</view>
			</scroll-view>
			<scroll-view class="lx_scroll" :scroll-x="true">
				<view class="lx_btn" v-for="(item,i) in arra" :key='i' :class='{check:checkda==item.id}'
					@click="changeaa(item,item.id)">
					{{item.title}}
				</view>
			</scroll-view>
		</view>
		<view class="imghd">
			<zero-waterfall :list="hunlist" type="4" styleType="3" :status="status">
			</zero-waterfall>
		</view>
		<view style="height:160upx;"></view>
		<view class="tabbar">
			<bottomBox :type='type'></bottomBox>
		</view>
	</view>
</template>

<script>
	import bottomBox from '../../components/navBox/bottom.vue'
	import Top from '../../components/navBox/top.vue'
	export default {
		data() {
			return {
				list: [],
				checkid: 0, //分类
				checkidIndex:0,
				title: '',
				type: 'five',
				arrd: [

				],
				checkd: 0,
				arrs: [

				],
				checkds: 0,
				arra: [],
				checkda: 0,
				arrg: [],
				checkdg: 0,
				showlx: false,
				hunlist: [],
				page: 1,
				status: 0,
				totalNum: '',
			}
		},
		components: {
			bottomBox,
			Top
		},
		computed: {

		},
		onLoad() {

		},
		mounted() {
			this.title = this.$store.state.shopsname.shopname;
			this.gethunlei();
			this.gethunlist();
		},
		onReachBottom() {
			if (this.page >= this.totalNum) {
				this.$wanlshop.msg('我是有底线的!')
			} else {
				this.status = 0
				this.page++
				this.gethunlist()
			}
		},
		methods: {
			// 获取分类
			gethunlei() {
				this.$request({
					url: 'wedding/wedding_dress_type',
					method: 'POST',
					data: {
						shop_id: this.$store.state.shopsname.id,
					}
				}).then(res => {
					if (res.statusCode == 200) {
						this.list = res.data.data.type
						this.arrg = res.data.data.spec[0].next
						this.arrd = res.data.data.spec[3].next
						this.arrs = res.data.data.spec[1].next
						this.arra = res.data.data.spec[2].next
					}
				})
			},
			// 获取列表
			gethunlist() {
				uni.showLoading({
					title: "加载中..."
				})
				this.$request({
					url: 'wedding/wedding_dress',
					method: 'POST',
					data: {
						shop_id: this.$store.state.shopsname.id,
						type_id: this.checkid,
						spec_id: this.checkdg + ',' + this.checkd + ',' + this.checkds + ',' + this.checkda,
						page: this.page,
						user_id: uni.getStorageSync('userInfo').id ? uni.getStorageSync('userInfo').id : 0,
						page: this.page
					},
				}).then(res => {
					if (res.data.code == 1) {
						if (this.page == 1) {
							this.hunlist = res.data.data.data;
						} else {
							this.hunlist.push(...res.data.data.data);
						}
						this.totalNum = res.data.data.last_page;
						uni.hideLoading();
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
							duration: 1000
						});
						uni.hideLoading();
					}
				})
			},
			change(item, e,index) {
				this.checkid = e;
				this.checkidIndex = index;
				this.checkdg = 0;
				this.checkd = 0;
				this.checkds = 0;
				this.checkda = 0;
				this.page = 1;
				this.status = 1;
				this.gethunlist();
			},
			changeag(item, e) {
				this.checkdg = e;
				this.page = 1;
				this.status = 1;
				this.gethunlist();
			},
			changea(item, e) {
				this.checkd = e;
				this.page = 1;
				this.status = 1;
				this.gethunlist();
			},
			changeas(item, e) {
				this.checkds = e;
				this.page = 1;
				this.status = 1;
				this.gethunlist();
			},
			changeaa(item, e) {
				this.checkda = e;
				this.page = 1;
				this.status = 1;
				this.gethunlist();
			},
			checkEnter(e) {
				uni.navigateTo({
					url: `./details?id=${e.id}`
				})
			}
		}
	}
</script>
<style>
	page {
		background: #111;
	}
</style>
<style scoped lang="scss">
	.tabbar {
		position: absolute;
	}

	.full {
		width: 750upx;
	}

	.boxs {
		position: relative;
		width: 100%;

		.jian {
			position: absolute;
			background: #111;
			width: 82rpx;
			height: 100rpx;
			right: 0;
			top: 0;

			.jianl {
				background: url(../../static/manner/jian.png)no-repeat center;
				background-size: 100%;
				width: 40rpx;
				height: 40rpx;
				margin-top: 30rpx;
				transition: all 0.5s;
				transform: rotateZ(180deg);

				&.ent {
					transform: rotateZ(360deg);
				}
			}
		}
	}

	.scroll {
		width: 750upx;
		white-space: nowrap;
		position: relative;
		border-bottom: 2rpx solid #2C2D2F;
		height: 100rpx;

		.tiao {
			position: absolute;
			width: 38rpx;
			height: 4rpx;
			background: #F9E8BE;
			bottom: 60rpx;
			transition: all 0.5s;
		}

		.btn {
			display: inline-block;
			color: #fff;
			width: 120rpx;
			text-align: center;
			color: #999;
			font-size: 28rpx;
			line-height: 100rpx;

			&.check {
				color: #F9E8BE;
			}
		}
	}

	.lx_box {
		width: 690rpx;
		margin: 0 auto;

		.lx_scroll {
			white-space: nowrap;
			margin-top: 24rpx;

			.lx_btn {
				display: inline-block;
				color: #666666;
				font-size: 26rpx;
				margin-right: 56rpx;

				&.check {
					color: #F9E8BE;
				}
			}
		}
	}

	.imghd {
		margin-top: 30upx;
	}
</style>
